<template>
	<view class="index-box">
		<!-- 标题栏 -->
		<fui-sticky>
			<view style="width: 100vw;background-color: #fff;">
				<fui-nav-bar zIndex="1000" title="千度导航" style="padding-left: 32rpx;padding-right: 32rpx;z-index: 999;" @leftClick="leftClick" @rightClick="rightClick">
					<!-- <fui-icon size="45" name="comment"></fui-icon> -->
					<template v-slot:right>
						<fui-icon size="45" name="search"></fui-icon>
					</template>
				</fui-nav-bar>
			</view>
		</fui-sticky>

		<view class="box">
			<!-- 轮播图 -->
			<view class="swiper-box fui-rect" v-if="appBanner.length">
				<fui-swiper-dot class="swiperd" type="3" :items="appBanner" :styles="{height: 50,bottom: 0,radius: true}" :current="current" field="title">
					<swiper class="fui-banner__wrap" @change="change" circular :indicator-dots="false" autoplay :interval="4500" :duration="150">
						<swiper-item v-for="(item,index) in appBanner" :key="index" @click="skip(item?.open_url,item?.title)">
							<image style="width: 100%;height: 100%;" :src="item?.bannerfile" mode="scaleToFill">
							</image>
						</swiper-item>
					</swiper>
				</fui-swiper-dot>
			</view>

			<view class="list margintop" v-if="topList?.length!==0" style="position: relative;">
				<fui-section style="padding: 0;margin-bottom: 20rpx;" color="#fd5531" title="固定头条(上头条效果更好哦)" isLine></fui-section>

				<view style="width: calc(100% / 5 - 5px);height: 120rpx;box-sizing: border-box;margin: 5rpx;" v-for="(item,index) in topList.slice(0,15)" :key="index" @click="goDetail(item._id)">
					<view class="fui-list__item" style="border-radius: 10rpx;">
						<image class="fui-cover" style="border-radius: 10rpx;" :src="item?.articlesImg" mode="scaleToFill"></image>
						<view class="fui-list__title" style="border-radius: 5rpx;">
							<fui-overflow-hidden :text="item?.title" type="1" size="22" color="#fff"></fui-overflow-hidden>
						</view>
					</view>
				</view>


			</view>

			<!-- tabs -->
			<fui-sticky :top="statusBarHeight" v-if="!skeletonShow">
				<fui-tabs style="border-radius: 15rpx;padding: 10rpx 20rpx;box-sizing: border-box;margin-top: 20rpx;" activeFontWeight="600" fontWeight="600" scroll center :zIndex="10000" :tabs="tabs" :current="currentTab" @change="changetab" :alignLeft="tabs.length>=3?false:true"></fui-tabs>
			</fui-sticky>

			<!-- 头条 -->
			<mescroll-body height="600px" class="fui-rect" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<useList :list="goods" :tabIndex="currentTab" :publish_type="publish_type" @goDetail="goDetail"></useList>
			</mescroll-body>


			<!-- 中间发布项组件 -->
			<bottomPop></bottomPop>

			<!-- 骨架屏 -->
			<fui-skeleton v-if="skeletonShow" background="#F1F4FA" outerClass="box"></fui-skeleton>
		</view>
	</view>
</template>

<script setup>
	import { ConfigStore } from '@/store/modules/config.js'
	import { getDateDiff } from '@/utils/index.js'
	const api = uniCloud.importObject('qc-article', {
		customUI: true // 取消自动展示的交互提示界面
	})
	const cd = uniCloud.importObject('qc-application', {
		customUI: true // 取消自动展示的交互提示界面
	})
	import { GlobalStore } from "@/store/index.js";
	import { LoginStore } from "@/store/modules/login.js";
	import { ref, reactive, computed } from 'vue'
	const userInfo = computed(() => (LoginStore()?.userInfo))
	import bottomPop from '@/components/bottomPop.vue'
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import { onLoad, onReachBottom, onPageScroll, onPullDownRefresh, onReady, onShow, onUnload } from "@dcloudio/uni-app";

	const currentTab = ref(0)
	const publish_type = ref("0")
	const tabs = ["热门文章", "最新发布", "阅读赚钱"]
	const changetab = (e) => {
		goods.value = []
		publish_type.value = "0"
		currentTab.value = e.index
		getMescroll().resetUpScroll()
	}
	//骨架屏
	const skeletonShow = ref(true)
	onPullDownRefresh(async () => {
		getMescroll().resetUpScroll()
		// 初始化数据
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 300)
		await init()
	})
	let statusBarHeight = ref(0)
	//头条数据
	let topList = ref([])

	//占位
	onLoad(async () => {
		// 设备的吸顶高度
		const info = uni.getSystemInfoSync()
		statusBarHeight.value = info.statusBarHeight + 44
		// 数据更新触发刷新列表
		uni.$on('resetUpScroll', () => {
			getMescroll().resetUpScroll()
		})
		// 初始化数据
		await init()
	})
	
	const appBanner = ref([])
	//初始化
	const init = async () => {
		try {
			//获取头条数据
			const resHead = await api.getHeadline()
			topList.value = resHead.data || []
		} catch (e) {
			console.log(e);
		}
		try {
			// 获取轮播图
			const res = await api.getAdList({
				pageNum: 1,
				pageSize: 10,
				publish_type: '3',
				category_id: '0'
			})
			appBanner.value = res.data
		} catch (e) {
			//TODO handle the exception
		}
		setTimeout(() => {
			skeletonShow.value = false
		}, 300)
	}

	const goods = ref([])
	// 分页
	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll(onPageScroll, onReachBottom)

	const upCallback = async (mescroll) => {
		mescroll.optDown.isLock = true
		try {
			let params = {
				pageNum: mescroll.num,
				pageSize: mescroll.size,
				publish_type: "0",
				tabIndex: currentTab.value
			}
			const res = await api.getAdList(params)
			console.log(res);
			const curPageData = res.data || [] // 当前页数据
			if (mescroll.num == 1) goods.value = []; // 第一页需手动制空列表
			goods.value = goods.value.concat(curPageData); //追加新数据
			//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			mescroll.endBySize(curPageData.length, res.total); //必传参数(当前页的数据个数, 总页数)
		} catch (e) {
			mescroll.endErr(); // 请求失败, 结束加载
		}
	}
	//轮播图管理
	const current = ref(0)
	const change = (e) => {
		current.value = e.detail?.current;
	}
	//轮播图跳转
	const skip = (e, title) => {
		if (title == '虚位以待') return GlobalStore().changebomShow()
		let index = e.indexOf("?")
		let url = e.substring(0, index);
		let id = e.substring(e.lastIndexOf("=") + 1, e.length)
		if (e.indexOf('http') == -1) {
			let publish_type = "0"
			// 判断跳转什么页面 动态切换请求详情参数publish_type
			if (url.indexOf('wzDetail') != -1) {
				publish_type = "0"
			} else if (url.indexOf('appDetail') != -1) {
				publish_type = "1"
			}
			//内部链接
			let item = {
				_id: id,
				publish_type: publish_type
			}
			// #ifdef APP-PLUS
			uni.navigateTo({
				url: `${url}?item=${JSON.stringify(item)}`
			})
			// #endif
			// #ifdef H5
			uni.navigateTo({
				url: `${url}?item=${encodeURI(JSON.stringify(item))}`
			})
			// #endif

		} else {
			//外部链接
			// #ifdef APP-PLUS
			plus.runtime.openURL(e)
			// #endif
			// #ifdef H5
			window.open(e)
			// #endif
		}
	}

	// 点击进入搜索页
	function rightClick() {
		uni.fui.href('/pages/search/search')
	}

	// 点击进入详情
	function goDetail(id,num) {
		if (id) {
			let item = {}
			if (num && num !== 0) {
				//领取红包
				item = {
					_id: id,
					publish_type: publish_type.value,
					hongbao: true
				}
			} else {
				item = {
					_id: id,
					publish_type: publish_type.value
				}
			}
			if (publish_type.value == 0) {
				if(item.hongbao){
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: `/pages/push/llDetail/llDetail?item=${JSON.stringify(item)}`
					})
					// #endif
					// #ifdef H5
					uni.navigateTo({
						url: `/pages/push/llDetail/llDetail?item=${encodeURI(JSON.stringify(item))}`
					})
					// #endif
				}else{
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: `/pages/push/wzDetail/wzDetail?item=${JSON.stringify(item)}`
					})
					// #endif
					// #ifdef H5
					uni.navigateTo({
						url: `/pages/push/wzDetail/wzDetail?item=${encodeURI(JSON.stringify(item))}`
					})
					// #endif
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sort_item {
		position: absolute;
		right: -22rpx;
		top: -22rpx;
		background-color: #e6f3fe;
		color: #5babf2;
		border-top-right-radius: 16rpx;
		border-bottom-left-radius: 16rpx;
		padding: 8rpx 20rpx;
	}

	.sort1 {
		margin-top: 5rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.fui-scroll__view {
		width: 520rpx;
		flex: 1;
		overflow: hidden;
	}

	.fui-ani__box {
		width: 640rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding-bottom: 64rpx;
	}

	.fui-hd__img {
		width: 100%;
		height: 192rpx;
		display: block;
	}

	.fui-ani__title {
		font-size: 36rpx;
		font-weight: 600;
		padding: 54rpx 0 32rpx;
		text-align: center;
	}

	.fui-desc {
		padding: 0 54rpx 82rpx;
		font-size: 24rpx;
		line-height: 48rpx;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
	}

	.fui-desc text {
		color: #FF2B2B;
	}

	.swiperd {
		border-radius: 16rpx;
	}

	.fui-banner__item {
		width: 100%;
		height: 360rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 600;
		border-radius: 16rpx;
	}

	.fui-banner__wrap {
		border-radius: 16rpx;
		height: 360rpx;
	}

	.zdsx {
		margin-left: 20rpx;
		padding: 5rpx 15rpx;
		border-radius: 8rpx;
		color: #fff;
		background-color: var(--fui-color-primary);
	}

	.zd {
		color: #fff;
		padding: 3rpx 15rpx;
		border-radius: 8rpx;
		background-color: var(--fui-color-danger);
	}

	.box {
		padding: 32rpx;
	}

	.fui-col_img {
		position: relative;
	}

	.guanfang {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		color: #fff;
		padding: 5rpx 10rpx;
		background-color: #fc5531;
		position: absolute;
		top: 0px;
		border-radius: 5rpx;
	}

	.tap {
		font-size: 26rpx;
		display: flex;
	}

	.fui-col_bottom {
		display: flex;
		justify-content: flex-end;
		font-size: 22rpx;
		margin-top: 5rpx;
	}

	.tap_item {
		margin-right: 10rpx;
	}

	.sort {
		margin-top: 5rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.browse {
		color: var(--fui-color-label);
		font-size: 22rpx;
	}

	.card {
		position: relative;
		padding: 22rpx;
		background-color: var(--fui-bg-color);
		border-radius: 16rpx;
		margin-top: 12rpx;
	}

	.icon {
		display: inline-block;
		vertical-align: middle;
		padding-right: 5px;
		padding-bottom: 5rpx;
	}

	.fui-col_text-a {
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.first {
		display: flex;
		flex-direction: column;
		z-index: -1 !important;
		padding: 10rpx;
		border-radius: 16rpx;
		max-height: 165rpx;
		background: linear-gradient(to right top, #ff6f49, #ff5a5e);
		;
	}

	.fui-col_text {
		font-size: 26rpx;
		font-weight: bold;
	}

	.first-bottom {
		margin: 5rpx 0 0 10rpx;
		width: 94%;
		color: #d8d8d8;
		display: flex;
		font-size: 22rpx;
		justify-content: space-between;
	}

	.first-title {
		display: flex;
		justify-content: flex-start;
	}

	.first-content {
		font-size: 28rpx;
		margin-left: 10rpx;
		color: #fff;
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.first-contentTwo {
		margin-left: 10rpx;
		color: #fff;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		text-align: center;
	}

	.first-text {
		margin-left: 5rpx;
		color: #fff;
		font-weight: bold;
	}

	.margintop {
		margin-top: 20rpx;
	}


	.swiper {
		height: 370rpx;
		border-radius: 16rpx;
	}

	.swiper-item {
		height: 100%;
		background-color: var(--fui-color-primary);
		border-radius: 20rpx;
	}

	.grid {
		border-radius: 16rpx;
		background-color: var(--fui-bg-color);
		margin-top: 32rpx;
		padding: 32rpx 0 32rpx 0;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.fui-grid__cell {
		margin: auto;
		text-align: center;
	}

	.list {
		box-sizing: border-box;
		border-radius: 16rpx;
		background-color: var(--fui-bg-color);
		padding: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 30rpx;
		width: 100%;
	}

	.list-item {
		width: 50%;
		margin-bottom: 22rpx;
	}

	.index {
		height: 60rpx;
		display: flex;
		align-items: center;
	}

	.index-a {
		font-weight: 600;
		color: red;
	}

	.index-text {
		color: #333;
		margin-left: 10rpx;
		font-size: 26rpx;
		word-wrap: break-word;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	::v-deep .fui-scroll__view>.fui-tabs__item:first-child {
		padding-left: 10rpx !important;
	}

	::v-deep .fui-scroll__view>.fui-tabs__item:last-child {
		padding-right: 10rpx !important;
	}

	::v-deep .fui-card__wrap {
		margin: 0rpx !important;
		height: 100%;
	}

	::v-deep .fui-card__body {
		height: 100%;
		width: 100%;
	}

	.fui-list__item {
		width: 100%;
		height: 100%;
		position: relative;
		background: #eee;
	}

	.fui-cover {
		width: 100%;
		height: 100%;
		display: block;
	}

	.fui-list__title {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: -8rpx;
		font-weight: 500;
		padding: 5rpx;
		box-sizing: border-box;
		height: 35rpx;
		line-height: 35rpx;
		background: rgba(0, 0, 0, 0.6);
		font-weight: 700;
		font-size: 20rpx;
		color: #fff;
	}
</style>